<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
   <meta charset="utf-8" />
   <title><decorator:title default="管理控制台"></decorator:title></title>
   <meta content="width=device-width, initial-scale=1.0" name="viewport" />
   <meta content="" name="description" />
   <meta content="Mosaddek" name="author" />
   <link href="${staticUrl}/js/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
   <link href="${staticUrl}/js/libs/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
   <link href="${staticUrl}/js/libs/bootstrap/css/bootstrap-fileupload.css" rel="stylesheet" />
   <link href="${staticUrl}/css/font-awesome.css" rel="stylesheet" />
   <link href="${staticUrl}/css/metro/metro.css" rel="stylesheet" />
   <link href="${staticUrl}/css/metro/metro-responsive.css" rel="stylesheet" />
   <link href="${staticUrl}/css/metro/metro-default.css" rel="stylesheet" id="style_color" />
   <link href="${staticUrl}/js/libs/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
   <link href="${staticUrl}/js/libs/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen">
   <link rel="stylesheet" href="${staticUrl}/js/libs/uniform/css/uniform.default.css" />
   <link rel="stylesheet" href="${staticUrl}/js/libs/data-tables/DT_bootstrap.css" />
   <link rel="stylesheet" href="${staticUrl}/js/plugins/jDialog/jDialog.css" />
   
   
	<!-- Load javascripts at bottom, this will reduce page load time -->
   <script src="${staticUrl}/js/libs/jquery/jquery-1.8.3.min.js"></script>
   <script src="${staticUrl}/js/plugins/jquery.nicescroll.js" type="text/javascript"></script>
   <script type="text/javascript" src="${staticUrl}/js/libs/jquery-slimscroll/jquery-ui-1.9.2.custom.min.js"></script>
   <script type="text/javascript" src="${staticUrl}/js/libs/jquery-slimscroll/jquery.slimscroll.min.js"></script>
   <script src="${staticUrl}/js/libs/fullcalendar/fullcalendar/fullcalendar.min.js"></script>
   <script src="${staticUrl}/js/libs/bootstrap/js/bootstrap.min.js"></script>
   
   <script type="text/javascript" src="${staticUrl}/js/libs/uniform/jquery.uniform.min.js"></script>
   <script type="text/javascript" src="${staticUrl}/js/libs/data-tables/jquery.dataTables.js"></script>
   <script type="text/javascript" src="${staticUrl}/js/libs/data-tables/DT_bootstrap.js"></script>
   <!-- ie8 fixes -->
   <!--[if lt IE 9]>
   <script src="${staticUrl}/js/plugins/excanvas.min.js"></script>
   <script src="${staticUrl}/js/pages/metro/respond.js"></script>
   <![endif]-->
   <script src="${staticUrl}/js/libs/jquery-easy-pie-chart/jquery.easy-pie-chart.js" type="text/javascript"></script>
   <script src="${staticUrl}/js/plugins/jquery.sparkline.js" type="text/javascript"></script>
   <script src="${staticUrl}/js/libs/chart-master/Chart.js"></script>
   <script src="${staticUrl}/js/plugins/jquery.scrollTo.min.js"></script>
   <script src="${staticUrl}/js/plugins/jDialog/jDialog.js"></script>

   <!--common script for all pages-->
  
   
   <decorator:head></decorator:head>
   <script type="text/javascript">
			var CONTEXTPATH ="${ctx}";
	</script>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="fixed-top">
   <!-- BEGIN HEADER -->
   <div id="header" class="navbar navbar-inverse navbar-fixed-top">
       <!-- BEGIN TOP NAVIGATION BAR -->
       <div class="navbar-inner">
           <div class="container-fluid">
               <!--BEGIN SIDEBAR TOGGLE-->
               <div class="sidebar-toggle-box hidden-phone">
                   <div class="icon-reorder tooltips" data-placement="right" data-original-title="收缩控制台"></div>
               </div>
               <!--END SIDEBAR TOGGLE-->
               <!-- BEGIN LOGO -->
               <a class="brand" href="javascript:void(0)">
                   <img src="${staticUrl}/img/logo.png" alt="Metro Lab" />
               </a>
               <!-- END LOGO -->
               <!-- BEGIN RESPONSIVE MENU TOGGLER -->
               <a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="arrow"></span>
               </a>
               <!-- END RESPONSIVE MENU TOGGLER -->
               <div id="top_menu" class="nav notify-row">
                   <!-- BEGIN NOTIFICATION -->
                   <ul class="nav top-menu">
                       <!-- BEGIN SETTINGS -->
                       <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                               <i class="icon-tasks"></i>
                               <span class="badge badge-important">6</span>
                           </a>
                           <ul class="dropdown-menu extended tasks-bar">
                               <li>
                                   <p>你有6条任务</p>
                               </li>
                               <li>
                                   <a href="#">
                                       <div class="task-info">
                                         <div class="desc">控制台</div>
                                         <div class="percent">44%</div>
                                       </div>
                                       <div class="progress progress-striped active no-margin-bot">
                                           <div class="bar" style="width: 44%;"></div>
                                       </div>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <div class="task-info">
                                           <div class="desc">数据库更新</div>
                                           <div class="percent">65%</div>
                                       </div>
                                       <div class="progress progress-striped progress-success active no-margin-bot">
                                           <div class="bar" style="width: 65%;"></div>
                                       </div>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <div class="task-info">
                                           <div class="desc">手机开发进度</div>
                                           <div class="percent">87%</div>
                                       </div>
                                       <div class="progress progress-striped progress-info active no-margin-bot">
                                           <div class="bar" style="width: 87%;"></div>
                                       </div>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <div class="task-info">
                                           <div class="desc">手机App进度</div>
                                           <div class="percent">33%</div>
                                       </div>
                                       <div class="progress progress-striped progress-warning active no-margin-bot">
                                           <div class="bar" style="width: 33%;"></div>
                                       </div>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <div class="task-info">
                                           <div class="desc">控制台</div>
                                           <div class="percent">90%</div>
                                       </div>
                                       <div class="progress progress-striped progress-danger active no-margin-bot">
                                           <div class="bar" style="width: 90%;"></div>
                                       </div>
                                   </a>
                               </li>
                               <li class="external">
                                   <a href="#">查看所有任务</a>
                               </li>
                           </ul>
                       </li>
                       <!-- END SETTINGS -->
                       <!-- BEGIN INBOX DROPDOWN -->
                       <li class="dropdown" id="header_inbox_bar">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                               <i class="icon-envelope-alt"></i>
                               <span class="badge badge-important">5</span>
                           </a>
                           <ul class="dropdown-menu extended inbox">
                               <li>
                                   <p>你有5条消息</p>
                               </li>
                               <li>
                                   <a href="#">
                                       <span class="photo"><img src="${staticUrl}/img/avatar-mini.png" alt="avatar" /></span>
									<span class="subject">
									<span class="from">Jonathan Smith</span>
									<span class="time">Just now</span>
									</span>
									<span class="message">
									    Hello, 这是个消息列子.
									</span>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <span class="photo"><img src="${staticUrl}/img/avatar-mini.png" alt="avatar" /></span>
									<span class="subject">
									<span class="from">Jhon Doe</span>
									<span class="time">10 mins</span>
									</span>
									<span class="message">
									 Hi, 最近咋样?
									</span>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <span class="photo"><img src="${staticUrl}/img/avatar-mini.png" alt="avatar" /></span>
									<span class="subject">
									<span class="from">Jason Stathum</span>
									<span class="time">3 hrs</span>
									</span>
									<span class="message">
									    This is awesome dashboard.
									</span>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <span class="photo"><img src="${staticUrl}/img/avatar-mini.png" alt="avatar" /></span>
									<span class="subject">
									<span class="from">Jondi Rose</span>
									<span class="time">Just now</span>
									</span>
									<span class="message">
									    Hello, this is metrolab
									</span>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">See all messages</a>
                               </li>
                           </ul>
                       </li>
                       <!-- END INBOX DROPDOWN -->
                       <!-- BEGIN NOTIFICATION DROPDOWN -->
                       <li class="dropdown" id="header_notification_bar">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                               <i class="icon-bell-alt"></i>
                               <span class="badge badge-warning">7</span>
                           </a>
                           <ul class="dropdown-menu extended notification">
                               <li>
                                   <p>你有7条提示信息</p>
                               </li>
                               <li>
                                   <a href="#">
                                       <span class="label label-important"><i class="icon-bolt"></i></span>
                                       Server #3 overloaded.
                                       <span class="small italic">34 mins</span>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <span class="label label-warning"><i class="icon-bell"></i></span>
                                       Server #10 not respoding.
                                       <span class="small italic">1 Hours</span>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <span class="label label-important"><i class="icon-bolt"></i></span>
                                       Database overloaded 24%.
                                       <span class="small italic">4 hrs</span>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <span class="label label-success"><i class="icon-plus"></i></span>
                                       New user registered.
                                       <span class="small italic">Just now</span>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">
                                       <span class="label label-info"><i class="icon-bullhorn"></i></span>
                                       Application error.
                                       <span class="small italic">10 mins</span>
                                   </a>
                               </li>
                               <li>
                                   <a href="#">See all notifications</a>
                               </li>
                           </ul>
                       </li>
                       <!-- END NOTIFICATION DROPDOWN -->

                   </ul>
               </div>
               <!-- END  NOTIFICATION -->
               <div class="top-nav ">
                   <ul class="nav pull-right top-menu" >
                       
                       <!-- BEGIN USER LOGIN DROPDOWN -->
                       <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                               <img src="${staticUrl}/img/about-us/${SESSION_USER.userImg }-small.jpg" alt="">
                               <span class="username">${SESSION_USER.userName }</span>
                               <b class="caret"></b>
                           </a>
                           <ul class="dropdown-menu extended logout">
                               <li><a href="javascript:toMyProfile();"><i class="icon-user"></i>我的资料</a></li>
                               <li><a href="${staticUrl}/login/exit"><i class="icon-key"></i>退出</a></li>
                           </ul>
                       </li>
                       <!-- END USER LOGIN DROPDOWN -->
                   </ul>
                   <!-- END TOP NAVIGATION MENU -->
               </div>
           </div>
       </div>
       <!-- END TOP NAVIGATION BAR -->
   </div>
   <!-- END HEADER -->
   <!-- BEGIN CONTAINER -->
   <div id="container" class="row-fluid">
      <!-- BEGIN SIDEBAR -->
      <div class="sidebar-scroll">
        <div id="sidebar" class="nav-collapse collapse">

         <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
         <div class="navbar-inverse">
            <form class="navbar-search visible-phone">
               <input type="text" class="search-query" placeholder="Search" />
            </form>
         </div>
         <!-- END RESPONSIVE QUICK SEARCH FORM -->
         <!-- BEGIN SIDEBAR MENU -->
          <ul class="sidebar-menu">
              <li class="sub-menu" id="metroconsole">
                  <a class="" href="${ctx}/frame/metro">
                      <i class="icon-home"></i>
                      <span>控制台</span>
                  </a>
              </li>
        </ul>
         <!-- END SIDEBAR MENU -->
      </div>
      </div>
      <!-- END SIDEBAR -->
      <!-- BEGIN PAGE -->  
      <decorator:body/>
      <!-- END PAGE -->  
   </div>
   <!-- END CONTAINER -->

   <!-- BEGIN FOOTER -->
   <div id="footer">
       2013 &copy; MetroAdmin.
   </div>
   <!-- END FOOTER -->
   <!-- BEGIN JAVASCRIPTS -->
   <!--script for this page only-->
   <!-- END JAVASCRIPTS -->   
   <script type="text/javascript">
   			var currentPageUrl = "${pageContext.request.requestURI}";
   			var openDialog;
   			function toMyProfile(){
   				openDialog = jDialog.iframe(CONTEXTPATH+'/user/myprofile?loginNum='+loginNum,{
   				    title : '用户信息',
   				    width : 800,
   				    height : 500
   				});
   			}
   			function lock(){
   				var url = CONTEXTPATH + "/lock";
   				openDialog = jDialog.iframe(CONTEXTPATH+'/lock',{
   				    title : '锁屏',
   				    width : 800,
   				    height : 500
   				});
   			}
			function createMenu(element){ 
				var isActive =false;
				var menuli = $("<li class='sub-menu '></li>");
				//child
				menuli.append("<a href='javascript:;' class='' ><i class='icon-"+element.F_MENU_ICON+"'></i><span>"+element.F_MENU_TITLE+"</span><span class='arrow'></span></a>");
				if(element.child){
					var menuUI = $("<ul class='sub'></ul>");
					for(var i=0;i<element.child.length;i++){
						
					 	var element2 = element.child[i];
					 	// 判断当前页面是否URL相同 
					 	if(currentPageUrl == (CONTEXTPATH+element2.F_MENU_COMMAND) ){
					 		isActive = true;
					 		menuUI.append("<li class='active'><a href='"+CONTEXTPATH+element2.F_MENU_COMMAND+"'>"+element2.F_MENU_TITLE+"</a></li>");
					 	}else{
					 		//添加菜单
						 	menuUI.append("<li><a href='"+CONTEXTPATH+element2.F_MENU_COMMAND+"'>"+element2.F_MENU_TITLE+"</a></li>");
					 	}
					}
					menuli.append(menuUI);
				}
				if(isActive){
					menuli.addClass("active");
				}
				return menuli;
			}
			$(document).ready(function(){

			  	if(currentPageUrl == (CONTEXTPATH+"/frame/metro")){
					$("#metroconsole").addClass("active");
				}else{
					$("#metroconsole").removeClass("active");
				}
				var urlgetUserMenu = CONTEXTPATH+"/frame/getUserMenu";
				$.getJSON(urlgetUserMenu, function(json){
					  for(var i=0;i<json.obj.length;i++){
						 	var element = json.obj[i];
							//添加菜单
							$("ul.sidebar-menu").append(createMenu(element));
						}
					  // 
					  $('#sidebar .sub-menu > a').click(function () {
					        var last = jQuery('.sub-menu.open', $('#sidebar'));
					        last.removeClass("open");
					        jQuery('.arrow', last).removeClass("open");
					        jQuery('.sub', last).slideUp(200);
					        var sub = jQuery(this).next();
					        if (sub.is(":visible")) {
					            jQuery('.arrow', jQuery(this)).removeClass("open");
					            jQuery(this).parent().removeClass("open");
					            sub.slideUp(200);
					        } else {
					            jQuery('.arrow', jQuery(this)).addClass("open");
					            jQuery(this).parent().addClass("open");
					            sub.slideDown(200);
					        }
					        var o = ($(this).offset());
					        diff = 200 - o.top;
					        if(diff>0)
					            $(".sidebar-scroll").scrollTo("-="+Math.abs(diff),400);
					        else
					            $(".sidebar-scroll").scrollTo("+="+Math.abs(diff),400);
					    });
					});
				
				// 加载用户任务 
			});
		</script>
		<script src="${staticUrl}/js/pages/metro/common-scripts.js"></script>
</body>
<!-- END BODY -->
</html>
